<template>
    <div style="width: 100%;padding: 0 10px;height: 100%;">
        <div v-if="!isAdd" style="width: 100%;">
            <div class="btn">
                <div>
                    <el-input style="width: 150px; margin-right: 20px;" v-model="name" placeholder="请输入用户名"></el-input>
                    <el-input style="width: 150px; margin-right: 20px;" v-model="per" placeholder="请输入管理人员"></el-input>
                    <el-input style="width: 150px; margin-right: 20px;" v-model="time" placeholder="请输入日期"></el-input>
                    <el-input style="width: 150px; margin-right: 20px;" v-model="address" placeholder="请输入地址"></el-input>
                    <el-input style="width: 150px; margin-right: 20px;" v-model="phone" placeholder="请输入联系方式"></el-input>
                    <el-button type="primary">搜索</el-button>
                </div>
                <img src="/nav/add.jpg" alt="" style="width: 20px;height: 20px;cursor: pointer;" @click="add">
            </div>
            <Table :data="data"></Table>
        </div>
        <div style="display: flex;flex-wrap: wrap;" v-else>
            <el-form label-position="right" label-width="80px" :model="formLabelAlign" style="width: 30%;">
                <el-form-item label="门店名称">
                    <el-input v-model="formLabelAlign.name"></el-input>
                </el-form-item>
                <el-form-item label="负责人">
                    <el-input v-model="formLabelAlign.per"></el-input>
                </el-form-item>
                <el-form-item label="营业时间">
                    <el-input v-model="formLabelAlign.time"></el-input>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="formLabelAlign.phone"></el-input>
                </el-form-item>
                <el-form-item label="营业地址">
                    <el-input v-model="formLabelAlign.address"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="formLabelAlign.txt"></el-input>
                </el-form-item>
                
                
            </el-form>

            <div style="margin-left: 30px;width: 60%;margin-bottom: 100px;">
                <h6>门店logo</h6>
                <el-upload action="#" list-type="picture-card" :auto-upload="false" style="margin-top: 20px;">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                <i class="el-icon-zoom-in"></i>
                            </span>
                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                <i class="el-icon-download"></i>
                            </span>
                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                <i class="el-icon-delete"></i>
                            </span>
                        </span>
                    </div>
                </el-upload>
            </div>
            <div style="width: 20%;display: flex;justify-content: space-between;margin: 0 auto;">
                <el-button type="primary" style="width: 30%;" @click="clicc(1)">确认</el-button>
                <el-button style="width: 30%;" @click="clicc(0)">取消</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { getObj } from '@/utils/index.js'
import Table from '@/components/admin/userList.vue'
import { getMendianInfo } from '../../api/index.js'
import axios from 'axios'


export default {
    name: 'Mendian',
    data() {
        return {
			//baseURL:require("../../../src/main.js").baseURL,
			
            name: '',
            per: '',
            time: '',
            address: '',
            phone: '',
            data:
            {
                data: [

                ]
            },
            isAdd: false,
            formLabelAlign:
            {
                name: '',
                time: '',

                phone: '',

                address: '',

                txt: '',

            },
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            //baseURL:
        }
    },
    methods: {
        add() {
            this.isAdd = !this.isAdd
        },
        //表格删除对象
        deleFn(index) {
            this.$message({
                type: 'success',
                message: '删除成功'
            })

            this.data.data.splice(index, 1)
        },
        //修改
        handleEdit(index, obj) {
            this.tip = '修改'
            this.obj = {
                name: obj.name,
                zhanghao: obj.zhanghao,
                phone: obj.phone
            }
            this.labels = ['名字', '账户', '联系方式']
            this.dialogVisible = true

        },
        handleRemove(file) {
            console.log(file);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleDownload(file) {
            console.log(file);
        },
        clicc(num){
            if(num){
                this.isAdd=!this.isAdd
                console.log(this.formLabelAlign);
                this.$axios.post("user/store/add",{
                        storename : this.formLabelAlign.name,
                        phone : this.formLabelAlign.phone,
                        leader : this.formLabelAlign.per,
                        time : this.formLabelAlign.time,
                        storeaddress : this.formLabelAlign.address

                }).then(res => {
                    this.$message({
                        type:'success',
                        message:'添加成功'
                    })
                    this.gengxin()
                })
                
            }else{
                this.isAdd=!this.isAdd
            }
        },
        gengxin () {
            console.log("函数被调用了");
            let obj = [
                {
                    url: 'https://ts4.cn.mm.bing.net/th?id=OIP-C.vz_WG4Cx5wIlPiQhEjx4PwAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
                    name: '门店1',
                    per: '111',
                    time: '9:00 - 21:00',
                    address: '手动阀手动阀',
                    phone: '1121212',
                    txt: '无',
                }
            ]
            
            obj = []
            getMendianInfo("user/store/list/1/888888888",{}).then(value => {

                console.log(value);
                console.log(value.data.list.records);
                value.data.list.records.forEach((value) => {
                    let temp = {
                        url: 'https://ts4.cn.mm.bing.net/th?id=OIP-C.vz_WG4Cx5wIlPiQhEjx4PwAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
                        name: value.storename,
                        per: value.leader,
                        time: value.time,
                        address: value.storeaddress,
                        phone: value.phone,
                        txt: '无',
                    }
                    obj.push(temp)
                })
            })
            this.data = getObj(obj, ['url', 'name', 'per', 'time', 'address', 'phone', 'txt'], ['门店logo', '门店名称', '负责人', '营业时间', '门店地址', '联系方式', '备注'], false)
        }
    },
    components: {
        Table
    },
    mounted() {
        this.gengxin()
    }
}
</script>

<style scoped>
.btn {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    align-items: center;
}

.btn input {
    width: 20% !important;
}
</style>